<template>
  <div class="tiny-png_wrapper">
    <!-- 返回上一页 - start -->
    <div class="go-back-box" >
      <span class="back-btn" @click="goBack">
        <mds-icon type="line-arrow-left" />
        <span>返回上一页</span>
      </span>
      <mds-divider></mds-divider>
    </div>
    <!-- 返回上一页 - end -->
    <h3>图片压缩 - <span>采用TinyPNG压缩</span></h3>
    <p style="color: red"><b style="font-size: 15px">注意：</b>远程压缩可能失败，若多次失败，请前往官网，链接如下：</p>
    <a href="https://tinypng.com/" target="_blank" class="tiny-link">TinyPNG - 图片压缩站点</a>
    <div class="app-list_wrapper">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
      >
        <!-- 输入文件路径 -->
        <el-form-item label="输入文件路径" prop="inPath">
          <el-input
            v-model="ruleForm.inPath"
            clearable
            style="width: 75%"
            placeholder="请输入输入文件路径"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-folder"
              style="cursor: pointer;"
              @click="handleGetPath('inPath')"
            >
            </i>
          </el-input>
        </el-form-item>
        <!-- 是否深层查找 -->
        <el-form-item label="深层查找" prop="deep">
          <mds-radio-group v-model="ruleForm.deep">
            <mds-radio value="1">是</mds-radio>
            <mds-radio value="0">否</mds-radio>
          </mds-radio-group>
        </el-form-item>
        <!-- 输出文件路径 -->
        <el-form-item label="输出文件路径" prop="outPath">
          <el-input
            v-model="ruleForm.outPath"
            clearable
            style="width: 75%"
            placeholder="默认输出到当前output文件夹"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-folder"
              style="cursor: pointer;"
              @click="handleGetPath('outPath')"
            >
            </i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >压缩</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <p v-html="dosContent" class="dos-wrapper"></p>
    </div>
  </div>
</template>

<script>
import thankTinyPng from "./process/main";

function getDefaultDosContent() {
  return "<div>ready...</div>";
}

export default {
  name: "tiny-png-page",
  data() {
    return {
      rules: {
        inPath: [
          {
            required: true,
            message: "请选择文件夹",
            trigger: "change",
          },
        ],
      },
      ruleForm: {
        inPath: "",
        deep: "0",
        outPath: "",
      },
      dosContent: getDefaultDosContent(),
    };
  },
  created() {
  },
  methods: {
    async handleGetPath(key = "inPath") {
      const { dialog } = require("electron").remote;
      const res = await dialog.showOpenDialog({
        title: "选择文件夹路径",
        properties: [
          "openDirectory",
          "showHiddenFiles",
          "dontAddToRecent",
          "treatPackageAsDirectory",
        ],
      });
      if (res && res[0]) {
        this.ruleForm[key] = res[0];
      } else {
        this.ruleForm[key] = "";
      }
    },
    logInfo(str) {
      this.dosContent = `${this.dosContent}\n${str}`;
      this.$nextTick(() => {
        document.querySelector('.dos-wrapper').scrollTop = 999999
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dosContent = getDefaultDosContent();
          const { inPath, deep, outPath } = this.ruleForm;
          thankTinyPng(
            inPath,
            Boolean(Number(deep)),
            outPath ? outPath : `${inPath}/output`,
            this.logInfo,
            this.logInfo
          );
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dosContent = getDefaultDosContent();
    },
    goBack() {
      this.$router.replace('/process')
    }
  },
};
</script>

<style lang="scss" scoped>
.tiny-png_wrapper {
  height: 100%;
  color: #000;
  h3 {
    padding: 12px 0 20px 0;
    span {
      font-size: 14px;
    }
  }
  .tiny-link {
    display: block;
    font-size: 14px;
    margin: 12px 0 24px 0;
  }
  .app-list_wrapper {
    .dos-wrapper {
      display: flex;
      flex-direction: column;
      margin: 26px 0;
      white-space: pre-wrap;
      background: #000;
      color: #fff;
      padding: 16px;
      height: 400px;
      overflow: auto;
    }
  }
}
</style>
